<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-tabs>
        <el-tab-pane label="个人详情">
          <!-- 个人信息 -->
          <el-form ref="fm" :model="formData" :rules="rules" label-width="100px">
            <!-- 用户名 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="formData.username" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 手机号 => 不支持修改 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="手机号">
                  <el-input v-model="formData.mobile" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 入职时间 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-date-picker
                    v-model="formData.timeOfEntry"
                    type="date"
                    class="inputW"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 员工照片 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="员工头像">
                  <!-- 放置上传图片 -->
                  <!--
                    .sync修饰符：是个语法糖，同步修改父组件的数据
                     -->
                  <Uploading
                    :staff-photo.sync="formData.staffPhoto"
                    @changePhoto="changePhoto"
                  />

                </el-form-item>
              </el-col>
            </el-row>
            <!-- 保存个人信息 -->
            <el-row class="inline-info" type="flex" justify="center">
              <el-col :span="12">
                <el-button type="primary" @click="updateUser">保存更新</el-button>
                <el-button @click="$router.back()">返回</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入获取员工详情后台接口
import { getUserDetailByIdAPI } from '@/api/user'
// 更新用户信息后台接口
import { saveUserDetailByIdAPI } from '@/api/employees'
export default {
  data() {
    return {
      // 表单变量
      formData: {
        username: '',
        timeOfEntry: '',
        // 头像
        staffPhoto: ''
      },
      // 表单校验规则
      rules: {
        // 用户名
        username: [{ required: true, min: 3, max: 10, message: '用户名必填！', trigger: 'change' }]
      }
    }
  },
  created() {
    // 获取员工的ID
    // params.参数名和动态路由的:参数名一一对应
    console.log(this.$route.params.id)
    // console.log(this.$route.params.id)
    this.getDetail()
  },
  methods: {
    // 获取员工详情数据
    async getDetail() {
      const detail = await getUserDetailByIdAPI(this.$route.params.id)
      console.log('员工详情数据：', detail)
      if (!detail.staffPhoto) {
        detail.staffPhoto = ''
      }
      // 回填数据
      this.formData = detail
    },
    // 点击更新员工的信息
    updateUser() {
      this.$refs.fm.validate(async(isOk) => {
        if (isOk) {
          // 校验通过
          await saveUserDetailByIdAPI(this.formData)
          this.$message.success('更新成功')
          // 更新vuex当前登录人的信息
          if (this.$store.state.user.userInfo.id === this.formData.id) {
            this.$store.dispatch('user/getUserInfoAction')
          }
        }
      })
    },
    changePhoto(newUrl) {
      this.formData.staffPhoto = newUrl
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
